<template>
    <div class="timing">
      <!-- 表格 -->
      <ykhttb ref="httbRef" v-if="updataTableData" :btn-is-show="btnIsShow" :table-col="tabUserList" :table-data="tableUserData"
      @getDjInfo="getDjInfo"/>
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" width="45%" :visible.sync="dialogTableVisible">
        <div class="vueJsonEditor">
          <div v-if="dialogTableVisible">
            <json-view :data="codeInfo"/>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { MQMonitorkafka,MQMonitorkafkagetLagRecordKafka } from '@/api/zt/index'
  import experiment from '@/mixins/experiment'
  import jsonView from 'vue-json-views'
  export default {
    components: {jsonView},
    mixins: [experiment],
    data() {
      return {
        codeInfo:{},
        updataTableData:true,
        btnIsShow: {
          operate: true,
          detile: false,
          monitor:true,
          del: false,
          update:false
        },
        title: '堆积详情',
        dialogTableVisible: false,
        allList:[],
        tabUserList: [
          {
            key: 'topic',
            title: '主题'
          },
          {
            key: 'partition',
            title: '分区'
          },
          {
            key: 'consumerGroup',
            title: '消费组'
          },
          {
            key: 'lag',
            title: '堆积数量'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
      })
    },
    methods: {
      getDjInfo(v){
        this.dialogTableVisible = true
        MQMonitorkafkagetLagRecordKafka({
          group:JSON.parse(v).consumerGroup||'',
          partition:JSON.parse(v).partition,
          topic:JSON.parse(v).topic
        }).then(res=>{
          this.codeInfo = res
        })
      },
      handleSizeChange(v) {
        this.size = v
        let newsStr = JSON.parse(JSON.stringify(this.allList))
        let a =newsStr.splice(0,this.size)
        this.tableUserData = JSON.parse(JSON.stringify(a))
      },
      handleCurrentChange(v) {
        this.updataTableData = false
        let newsStr = JSON.parse(JSON.stringify(this.allList))
        let a =newsStr.splice(this.size*v-10,this.size)
        this.tableUserData = JSON.parse(JSON.stringify(a))
        this.updataTableData = true
      },
  
      // 获取用户列表
      getUserList() {
        this.dialogTableVisible = false
        this.$refs.httbRef.isShowLoading(true)
        MQMonitorkafka({}).then(res => {
          this.allList  = JSON.parse(JSON.stringify(res.data.records))
          this.tableUserData = res.data.records.splice(0,10)
          this.total = this.allList.length
          this.$refs.httbRef.isShowLoading(false)
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
    @import "~@/assets/styles/auto.scss";
        .info{
          margin-top: 20px;
        }
        .info>p{
          padding:4px 0;
          margin-left:80px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .info>p:nth-child(1){
          color: #474747;
          font-weight: bold;
          background: #f1f4f7;
          padding-left: 0px;
        }
        .info>p>label{
          display: inline-block;
          width:35%;
        }
        .info>p>span{
          color:#494949;padding: 2px 4px;
          border-radius: 2px;font-size: 12px;
          background: #f0f0f0;
        }
      .ztree {
          margin-left:80px;
          border:1px solid #efefef;
          padding: 4px;
          border-radius: 2px;
          min-height: 270px;
          height: 300px;
          overflow-y: scroll;
      }
      .resoceDialog{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .resoceDialog>div>p{
        color: #464646;
        padding: 10px 0;
        font-weight: bold;
        // background: #f1f4f7;
        margin-left:26px;
        padding-left:0px;
        margin-bottom: 5px;
        text-align: right;
      }
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }
  
        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .autoClass{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .autoClass .el-form-item{
          width:50%;
        }
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px;
          }
        </style>
  